<template>
    <div>
        <el-dialog class='dialog'
                   :class="{'no-body-padding': noBodyPadding, 'common-padding': commonPadding}"
                   :append-to-body="appendToBody" @close="dilogClose" :center="center"
                   :modal="modal" :title="title" :visible.sync="dialogFormVisibleFlag"
                   :width="width" :show-close='showClose' :close-on-click-modal="modalFlag"
                   :top="top">
            <slot name="title" slot="title"></slot>
            <slot name="option"></slot>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        dialogFormVisible: {
            type: Boolean,
            default: false
        },
        appendToBody: {
            type: Boolean,
            default: false
        },
        center: {
            type: Boolean,
            default: false
        },
        modal: {
            type: Boolean,
            default: true
        },
        showClose: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '0'
        },
        modalFlag: {
            type: Boolean,
            default: true
        },
        noBodyPadding: Boolean,
        commonPadding: Boolean,
        top: {
            type: String,
            default: '15vh'
        },
    },
    computed: {
        dialogFormVisibleFlag: {
            get() {
                return this.dialogFormVisible;
            },
            set(val) {
                this.$emit('close', val);
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        dilogClose() {
            this.$emit('close');
        }
    }
};
</script>
<style lang="less" scoped>
</style>
